import routes from './routes'
import { Suspense } from 'react'
import { Routes, Route, useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom'


// 创建一个渲染的路由组件，当一进来的时候，不渲染路由表中定义的，而是进行一些处理，可以使每一个渲染的组件都能达到我们想要的效果
// 可以做权限登录态校检、传递路由信息等
const Element = function Element(props) {
    let { component: Component } = props
    // 把路由信息获取到，最后基于属性传递给组件:只要是基于<Route>匹配渲染组件，都可以基于属性获取路由信息
    const location = useLocation(),
        navigate = useNavigate(),
        params = useParams(),
        [usp] = useSearchParams()

    // 将传进来的组件渲染
    return <Component location={location} navigate={navigate} params={params} usp={usp} />
}


// 递归创建Route
const createRoute = function createRoute(routes) {

    return <>
        {
            routes.map((item, index) => {
                let { path, children } = item
                // 每一次路由匹配成功，不直接渲染组件，而是渲染Element，在Element做一些特殊的处理，再去渲染真实的组件
                return <Route key={index} path={path} element={<Element {...item} />} >
                    {/* 基于递归的方式，绑定子集路由 */}
                    {
                        Array.isArray(children) ? createRoute(children) : null
                    }
                </Route>
            })
        }
    </>

}

// 路由容器
export default function RouteView() {
    return <Suspense fallback={<div>正在加载中....</div>}>
        <Routes>
            {
                createRoute(routes)
            }
        </Routes>
    </Suspense>
}

// 创建withRouter组件
export function withRouter(Component) {
    // Component 是我们真实要渲染的组件,Hoc是我们暴露出去的那个组件函数
    return function Hoc(props) {
        const location = useLocation(),
            navigate = useNavigate(),
            params = useParams(),
            [usp] = useSearchParams()
        return <Component {...props} location={location} navigate={navigate} params={params} usp={usp} />
    }
}

